<template>
  <div id="UpDatapwd">
    <van-nav-bar title="修改密码" left-arrow @click-left="onClickLeft" />
    <van-form class="UpData" @submit="onSubmit">
      <van-field
        v-model="oldPassword"
        name="oldPassword"
        left-icon="jiesuo"
        type="password"
        placeholder="请输入旧密码"
        :rules="UserRules.password"
      >
        <van-icon
          class="iconfont"
          class-prefix="icon"
          slot="left-icon"
          name="jiesuo"
        />
      </van-field>
      <van-field
        v-model="newPassword"
        name="newPassword"
        left-icon="jiesuo"
        center
        type="password"
        placeholder="请输入新的密码"
        :rules="UserRules.password"
      >
        <van-icon
          class="iconfont"
          class-prefix="icon"
          slot="left-icon"
          name="jiesuo"
        />
      </van-field>
      <!-- <van-field
        v-model="newpasswordAgain"
        name="newpasswordAgain"
        left-icon="jiesuo"
        center
        type="password"
        placeholder="请再次输入新的密码"
        :rules="UserRules.password"
      >
        <van-icon
          class="iconfont"
          class-prefix="icon"
          slot="left-icon"
          name="jiesuo"
        />
      </van-field> -->
      <div class="longinButton">
        <van-button
          class="longinB"
          type="info"
          :disabled="ForgotBtn"
          native-type="submit"
          block
          >确定</van-button
        >
      </div>
    </van-form>
  </div>
</template>
<script>
import { getUpDatapwd } from "@/api/user";
import { mapState } from "vuex";

export default {
  data() {
    return {
      oldPassword: "",
      newPassword: "",
      ForgotBtn: false,
      UserRules: {
        password: [
          { required: true, message: "请填写密码" },
          {
            pattern: /^\w{6,12}$/,
            message: "密码格式错误",
          },
        ],
      },
    };
  },
  computed: {
    ...mapState(["uid"]),
  },
  methods: {
    onClickLeft() {
      this.$router.replace("/My");
    },
    onSubmit() {
      this.ForgotBtn = true;
      let { oldPassword, newPassword,uid } = this;
      // console.log(this)
        getUpDatapwd({ oldPassword, newPassword, uid }).then((res) => {
          console.log(res);
          if (res.code == 0) {
            this.$toast("密码重置成功,请重新登陆");
            this.ForgotBtn = true;
            setTimeout((v) => {
              this.$router.replace("/TheLongin");
            }, 800);
          } else {
            this.ForgotBtn = false;
            this.$toast(res.msg || "密码重置失败");
          }
        });
    },
  },
};
</script>

<style lang="scss" scoped>
#UpDatapwd {
  height: 177.8vw;
  background-color: #f7f8fa;
}

::v-deep .van-button--info {
  color: #6b6766;
  background-color: #ededed;
  border: #fff;
  border-radius: 10px;
}
::v-deep .longinB {
  margin-top: 30px;
  margin-left: 20px;
  width: 330px;
  background-color: #8b69a9;
  color: #fff;
  border-radius: 1px;
}
</style>